<!--
 * @Author: your name
 * @Date: 2021-05-17 14:24:07
 * @LastEditTime: 2021-05-17 22:22:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-demo\src\components\Paging.vue
-->

<template>
  <div class="wrap" v-if="pageNum > 1">
    <ul>
      <li @click="todoPage(pageIndex - 1)">&lt;</li>
      <li
        v-for="it in pageNum"
        :key="it"
        :class="{ current: it == pageIndex }"
        @click="todoPage(it)"
      >
        {{ it }}
      </li>
      <li @click="todoPage(pageIndex + 1)">&gt;</li>
      <!-- <input type="text" v-model="pageSize" @blur="chengePageSize()" /> -->
      <!-- / 页 -->
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    pageTotal: {
      type: Number,
      default: 0,
    },
    pageIndex: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      pageSize: 40,
    };
  },
  computed: {
    pageNum() {
      return Math.ceil(this.pageTotal / this.pageSize);
    },
  },
  methods: {
    todoPage(i) {
      if (i < 1) {
        i = 1;
      } else if (i > this.pageNum) {
          i = this.pageNum;
      }
      this.$emit("chengePageIndex", i);
    },
    chengePageSize() {
      this.$emit("chengePageSize",this.pageSize );
    },
  },
  mounted() {
    console.log(this.pageTotal);
  },
};
</script>

<style scoped>
.wrap ul {
  display: flex;
  list-style: none;
  justify-content: center;
  align-items: center;
}

.wrap ul input {
  height: 20px;
  width: 30px;
}

.wrap ul li {
  margin: 10px;
  padding: 10px;
  background: #ebeef5;
  cursor: pointer;
  user-select: none;
  border-radius: 3px;
}

.wrap ul li:hover,
.wrap ul li.current {
  background: #3eaf7c;
  color: #fff;
}
</style>